export const baseUsage = `
import {PhTable} from 'phoeon'
//行功能菜单配置
export interface RowAction{
    view?:boolean, //启用行查看按钮
    edit?:boolean, //启用行编辑按钮
    del?:boolean    //启用行删除按钮
}
//表格工具栏配置
export interface TableAction{
    delChecked?:boolean, //删除选中按钮
    export?:boolean,    //导出xls/cvs按钮
    print?:boolean,     //打印按钮
    colFilter?:boolean  //列过滤按钮
}
//表格列配置数据结构
export interface ITh{
    key:string,     //列key
    name:string,    //列名字
    check?:string,//<check|radio> 启用单选或者复选功能
    lock?:boolean,  //是否锁定该列
    lockPos?:string,   //<left｜right> 锁定位置
    sort?:true,     //启用排序
    editable?:boolean, //是否可编辑 目前不支持
    dataType?:string,   //列数据类型，排序和合计列的时候需要指定
    align?:string,  //文本对齐center｜right，默认left
    sum?:boolean,   //开启合计行
    clickable?:boolean, //列是否可以点击 <table @td-click="onTdClick"/>
    href?:string, //链接地址，表面该列是link a标签
    target?:string, //<_blank|_self>
    type?:string, //列主题颜色 <primary|success|danger|info|warning>
    format?:string,//列展示模式 {name:"章三",age:21}  format="我叫\${name}，今年\${age}岁" 结果：我叫章三今年21岁
    rowAction?:RowAction, //启用行功能菜单配置
}
//表格组件配置介绍
interface Table{
    rowAction:{
        type:Object as PropType<RowAction>
    },
    tableAction:{
        type:Object as PropType<TableAction>
    },
    name:{
        type:String //表格的title，用于导出数据时的名字\${name}.xls  \${name}.csv
    },
    check:{
        type:Boolean //启用复选功能
    },
    radio:{
        type:Boolean //启用单选功能
    },
    ths:{
        type: Array as PropType<Array<ITh>>, //表格列配置
        default:()=>[]
    },
    list:{
        type: Array as PropType<Array<Record<string,any>>>, //数据记录
        default:()=>[]
    },
    checked:{
        type: Array as PropType<Array<string|number>> //单选复选功能开启的时候，用于指定默认被选中的记录id数组
    },
    pager:{
        type:Boolean //是否启用分页
    },
    pageJustify:{
        type:String,
        default:"flex-end" //分页左右对齐方式参考flex:justify-content:?
    },
    pagerType:{type:String,default:'transparent'},

    //如下为分页器配置，具体参考分页配置教程
    total:{type:Number,default:0}, 
    page:{type:Number,default:1} , 
    prev:{type:String},
    next:{type:String},
    "show-total":{type:Boolean,default:true},
    "show-pagesize":{type:Boolean,default:true},
    "show-jump":{type:Boolean,default:true},
    "pagesize-options":{
        type:Array
    }

    showLoading(opt?:{icon}) //打开loading
    hideLoading():void //关闭loading

    @tr-click：(id:string|number,row:Record<string:any>)=>void   //行点击事件
    @td-click: (key:ITh.key,row:Record<string:any>)=>void   //列点击事件 需要配合 ITh->clickabel 开启
    @row-view: (row:Record<string,any>)=>void   //行记录查看事件
    @row-edit: (row:Record<string,any>)=>void   //行编辑事件
    @row-del: (row:Record<string,any>)=>void    //行删除事件
    @del-checked: (v:Array<string|number>)=>void    //选中记录删除事件 需要配合TableAction.delChecked:true
    @page: (p:{page:number})=>void   // 参考分页教程
    @check: (ids:Array<string|number>)=>void  //单选或者复选事件
}
`;

export const demo0 = `
<template>
    <ph-divider>表格完整功能案例介绍</ph-divider>
    <ph-table 
        prev=""
        next=""
        name="测试表"
        :ths="ths" 
        :list="list" 
        :checked="checkedRes" 
        :check="true"

        :total="total"
        :page="page"
        :pager="pager"
        :pageJustify="'right'"
        :show-total="true" 
        :show-pagesize="true" 
        :show-jump="true"

        :rowAction='{view:true,edit:true,del:true}'
        :tableAction="{export:true,colFilter:true,print:true,delChecked:true}"

        @tr-click="onTrClick"
        @td-click="onTdClick"
        @row-view="onRowView"
        @row-edit="onRowEdit"
        @row-del="onRowDel"
        @del-checked="onDelChecked"
        @page="onPage"
        @check="onCheck"
        ></ph-table>
    <ph-blockquote type="primary">
        行为：【{{action}}】,
        <br/>
        数据: <br/>{{actionData}}
    </ph-blockquote>
</template>
<script lang="ts">
import { defineComponent, inject, reactive, Ref, ref, toRefs } from 'vue'
import {PhTable} from 'phoeon'

import Mock from 'mockjs'
export default defineComponent({
    components:{PhTable},
    setup(){
        const action = ref("")
        const actionData = ref("")
        const alert = inject<Ref<{open:(msg:string,t:string)=>void}>>('alert')
        const genData = ()=>{
            return Mock.mock({
                'list|10': [{
                    'id|+1': 1,
                    'name':'@cname',
                    'gender':'男',
                    'age|1-100':0,
                    'rank|1-10':0,
                    'park|1-10':0,
                    'assets|1-100':0,
                    'birth':'@date',
                    'uni':'@cword(2)大学',
                    'school':'@cword(2)小学',
                    'pro':'@ctitle',
                    'hobby':'@ctitle'
                }]
            })
        }
        const data = reactive({
            list:genData().list,
            total:125,
            page:1,
            pager:true
        })
        const ths=[{
                key:'id',
                name:"id",
                lock:true,
                lockPos:"left",
            },{
                key:'name',
                name:"姓名",
                lock:true,
                lockPos:"left",
                format:'${name}',
                href:"https://www.baidu.com/s?wd=${name}",
                target:"_blank"
            },{
                key:'assets',
                name:"资产",
                dataType:"number",
                type:"danger",
                sum:true,
                lock:true,
                lockPos:"left",
                sort:true
            },{
                key:'gender',
                name:"性别",
            },{
                key:'age',
                name:"年龄",
                type:"warning",
                sort:true,
                align:"center",
                dataType:'number',
                editable:false,
            },{
                key:'birth',
                name:"生日",
                sort:true,
                type:"primary",
                dataType:'date',
                width:"10rem"
            },{
                key:'park',
                name:"车位",
                dataType:"number",
                sum:true,
                sort:true
            },{
                key:'uni',
                name:"大学",
                clickable:true,
                type:"info",
                width:"10rem"
            },{
                key:'school',
                name:"小学",
                width:"10rem"
            },{
                key:'rank',
                name:"排行榜",
                dataType:"number",
                sum:true,
                lock:true,
                lockPos:"right",
                sort:true
            },{
                key:'pro',
                name:"职业",
                width:"10rem"
            },{
                key:'hobby',
                name:"兴趣",
                width:"10rem"
            },
        ]
        const checkedRes = ref<Array<string|number>>([])
        const onCheck = (v:Array<string|number>)=>{
            console.log(v)
            checkedRes.value = v
            action.value="check"
            actionData.value = JSON.stringify(v)
        }
        const onPage = (p:{page:number})=>{
            console.log(p)
            data.page = p.page
            data.list = genData().list
            action.value="page"
            actionData.value = JSON.stringify(p)
        }
        const onTdClick = (key:string,row:Record<string,any>)=>{
            console.log(key,row,'tdclick')
            action.value="td-click"
            actionData.value = JSON.stringify(row)
        }
        const onTrClick = (id:string|number,row:Record<string,any>)=>{
            console.log(id,row,'trclick')
            action.value="tr-click"
            actionData.value = JSON.stringify(row)
        }
        const onRowView = (row:Record<string,any>)=>{
            console.log('row-view',row)
            action.value="row-view"
            actionData.value = JSON.stringify(row)
            alert?.value?.open(actionData.value,action.value)
        }
        const onRowEdit = (row:Record<string,any>)=>{
            console.log('row-edit',row)
            action.value="row-edit"
            actionData.value = JSON.stringify(row)
        }
        const onRowDel = (row:Record<string,any>)=>{
            console.log('row-del',row)
            action.value="row-del"
            actionData.value = JSON.stringify(row)
        }
        const onDelChecked = (v:Array<string|number>)=>{
            console.log('del-checked',v)
            action.value="del-checked"
            actionData.value = JSON.stringify(v)
        }
        return {
            ...toRefs(data),
        ths,
        action,
        actionData,
        checkedRes,
        onCheck,
        onPage,
        onTrClick,
        onTdClick,
        onRowView,
        onRowEdit,
        onRowDel,
        onDelChecked
        }
    }
})
</script>

`;
